<template>
  <div>
       <div class="budingBox" v-if="imgFlag===1">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" >
            <el-form-item label="车辆型号">
                <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="车辆编号">
                <el-input v-model="formLabelAlign.region"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
                <el-input v-model="formLabelAlign.uname"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
                <el-input v-model="formLabelAlign.ucar"></el-input>
            </el-form-item>
            <el-form-item label="登陆号码">
                <el-input v-model="formLabelAlign.unum"></el-input>
            </el-form-item>
            <el-button type="primary" @click="imgFlag++">绑定</el-button>
            <el-button>重置</el-button>
            </el-form>
            
       </div>
       <div class="i1" v-if="imgFlag===2">
            <img src="../assets/imgs/c2.png" alt="" @click="imgFlag++">
       </div>
       <div class="i2" v-if="imgFlag===3">
            <img src="../assets/imgs/car11.png" alt="" @click="imgFlag=1">
            <div class="info">
                <div>总里程：17456km</div>
                <div>电量：<span>47%</span></div>
            </div>
            <div class="info2">
                <div>车辆编号：1204208</div>
                
            </div>
       </div>
       
  </div>
</template>

<script>
export default {
    data() {
      return {
        labelPosition: 'top',
        imgFlag:1,
        formLabelAlign: {
          name: '',
          region: '',
          type: '',
          uname:'',
          ucar:'',
          unum:'',
        }
      };
    }

}
</script>

<style lang="scss" scoped>
    .budingBox{
        width: 700px;
        height: 300px;
        margin-left:450px ;
    }
    .i1{
        margin-left: 650px;
        margin-top:200px ;
    }
    .i2{
       position: relative;
       img{
        position: absolute;
        top: -500px;
        left: -150px;
       }
       .info{
            width: 800px;
            height: 100px;
            background: rgb(90, 88, 88);
            position: absolute;
            top: 500px;
            left: 400px;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            font-size:40px ;
            padding:  0 20px 0 20px ;
            span{
                color: rgb(37, 226, 110);
            }

       }
       .info2{
            width: 400px;
            height: 100px;
            background: rgb(88, 90, 88);
            position: absolute;
            top: 650px;
            left: 600px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(247, 233, 37);
            font-size:40px ;
            padding:  0 20px 0 20px ;
       }
        
    }
</style>

